<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>

<form:form commandName="taskMain" cssClass="form-horizontal" role="form" onsubmit="return false;" enctype="multipart/form-data">
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">
            <a style="color: red">*</a>任务名称
        </label>
        <div class="col-sm-8">
            <input type="text" name="mainName" id="taskName" placeholder="任务名称" value="${taskNew.taskName}"
                   class="form-control required">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="content">任务内容</label>
        <div class="col-sm-8">
            <textarea rows="5" id="content" name="content" placeholder="任务内容" value="${taskNew.content}"
                      class="form-control"/>
        </div>
    </div>
  <%--  <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">抄送领导</label>
        <div class="col-sm-8 ">
            <select multiple id="e1" name="copeIdList">
                <option></option>
            </select>
            <div id="e2" style="display: none">
                <input type="hidden" value="" name="">
            </div>
        </div>
    </div>--%>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right">任务附件</label>
        <div class="col-sm-6">
            <input type="file" id="fileupload" name="files" class="form-control">
        </div>
        <div class="col-sm-2">
            <input type="button" value="上传" id="btn-upload" style="width: 100%; height: 32px;"
                   class="btn-large btn-primary"/>
            <input type="text" name="file" id="file" value="${taskNew.file}" class="form-control "
                   style="display: none"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="dateTime"><a style="color: red">*</a>任务时限</label>
        <div class="col-sm-3">
            <input type="number" name="timeLimit" id="dateTime" placeholder="任务时限" value="${taskNew.dateTime}"
                   class="form-control  required"/>
        </div>
        <label class="col-sm-2 control-label no-padding-right " for="referenceNumber"><span style="color: red;">*</span>文号</label>
        <div class="col-sm-3">
            <input type="text" name="fileNumber" id="referenceNumber" placeholder="文号"
                   value="${taskNew.referenceNumber}"
                   class="form-control required">
        </div>
    </div>
    <div class="form-group" <%--style="position: relative;"--%>>
        <div class="col-sm-2 col-sm-offset-2">
            <input type="button" value="添加任务" id="addDepart" onclick="addDeparts()"
                   class="btn-sm btn-success"/>
        </div>
        <div class="col-sm-2">
        <input type="button" value="导入Excel" id="displayExcel" class="btn-sm btn-success"/>
    </div>
     </div>
    <%--议题或承办单位内容DIV--%>
    <div id="subContent">

    </div>
<input id="categoryId" name="categoryId" value="${categoryId}" type="hidden">

</form:form>
<script src="<s:url value="/assets/js/chosen.jquery.js"></s:url>"></script>
<script src="<s:url value="/assets/js/ajaxfileupload.js"></s:url>"></script>
<script src="<s:url value="/assets/js/modal/modal.js"></s:url>"></script>

<script type="text/javascript">
    var i = 0;
    jQuery(function ($) {
        $('.date-picker').datepicker({
            inline: true,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        })
        //show datepicker when clicking on the icon
            .next().on(ace.click_event, function () {
            $(this).prev().focus();
        });

        // 获取承办单位
        getDepartCategory();
    });

    // 承办单位分类option字符串
    var departCategoryOption = '<option value="">点击选择</option>';

    /**
     * 获取单位分类
     */
    function getDepartCategory() {
        $.ajax({
            type: "post",
            url: getUrl("deptList"),
            data:{"deptRelation":"/02/"},
            dataType: "json",
            success: function (data) {
                if (data == undefined || data == null) {
                    console.log("获取承办单位为空");
                    return;
                }
                for (var i = 0; i < data.length; i++) {
                    var deptName = data[i].deptName;
                    var deptId = data[i].deptId;
                    var deptRelation = data[i].deptRelation;
                    departCategoryOption += '<option data-deptId ="' + deptId + '" value="' + deptRelation + '">' + deptName + '</option>';
                }
                $('#fixed').html(departCategoryOption);
            },
            error: function (jqXHR) {
                console.log("获取承办单位失败");
            }
        });
    }

    // 子任务的index
    var subIndex = $("#subContent>.form-group").length;
    //子任务单位的index
    var deptIndex= $("#deptContent>.form-group").length;
    //
    /**
     * 增加议点和承办单位
     */
    function addDeparts(text) {
        if (text == null || text == 'undefined' || text == '') {
            text = $('#taskNew #categoryId').find('option:selected').text();
        }
        var subName = 'taskSubFilterList[' + subIndex + '].subName';
        var deptId = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].deptId';
        var deptName = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].deptName';
        var timeLimit = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].timeLimit';
        var unitType = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].unitType';
        console.log("subIndex:"+subIndex,"deptIndex:"+deptIndex);
        var html;
        html =
            '<div class="form-group">\n' +
                '<div class="form-group" style="margin:0px 0px 15px ">\n' +
                '    <label class="col-sm-2 control-label no-padding-right" for="' + subName + '"><a style="color: red">*</a>议题内容</label>\n' +
                '    <div class="col-sm-8">\n' +
                '        <textarea type="text" name="' + subName + '" id="' + subName + '" placeholder="议题内容" \n' +
                '               class="form-control required"></textarea>\n' +
            '         </div>\n' +
            '         <div class="col-sm-1">\n' +
            '         <input type="button" value="删除任务"\n' +
            '        class="btn-sm btn-danger delDeparts"/>\n' +
                '    </div>\n' +
                '</div>\n' +
                '<div class="form-group" style="margin:0px 0px 15px ">\n' +
                     '<div class="form-group" style="margin:0px 0px 15px ">\n' +
                    '    <label class="col-sm-2 control-label no-padding-right"><a style="color: red">*</a>承办单位</label>\n' +
                    '    <div class="col-sm-2">\n' +
                    '        <select class="form-control required" onchange="getChildDepart(this)">\n' + departCategoryOption +
                    '        </select>\n' +
                    '    </div>\n' +
                    '    <div class="col-sm-3">\n' +
                    '        <select class="form-control required" name="' + deptId + '" id="' + deptId + '" onchange="changeDepart(this)">\n' +
                    '           <option value="">点击选择</option>\n' +
                    '        </select>\n' +
                    '        <input type="hidden" name="' + deptName + '" id="' + deptName + '" />\n' +
                    '    </div>\n' +
                    '    <div class="col-sm-2">\n' +
                    '        <input type="button" value="添加单位" class="btn-sm btn-success addbtn" />\n' +
                    '    </div>\n' +
            '    </div>\n' +
            '<div class="form-group" style="margin:0px 0px 15px ">\n' +
            '    <label class="col-sm-2 control-label no-padding-right"><a style="color: red">*</a>单位类型</label>\n' +
            '    <div class="col-sm-2">\n' +
            '        <select class="form-control required" name="' + unitType + '" id="' + unitType + '" >\n' +
                        ' <option value="">点击选择</option>\n' +
                        ' <option value="1">牵头</option>\n' +
                        ' <option value="2">主办</option>\n' +
                        ' <option value="3">协办</option>\n' +
                        ' <option value="4">分办</option>\n' +
                        ' <option value="5">独办</option>\n' +
            '        </select>\n' +
            '    </div>\n' +
            '    <label class="col-sm-2 control-label no-padding-right" for="dateTime">任务时限</label>\n' +
            '    <div class="col-sm-3">\n' +
                '   <input type="number" name="'+timeLimit+'" id="'+timeLimit+'"  placeholder="任务时限" value=""  \n' +
                '   class="form-control dateTime"/>  \n' +
                '</div>   \n' +
            '  </div>\n' +
            '  </div>\n' +
            '    </div>\n' +
            '</div>';

        if (i == 0){
            $('#subContent').html(html);
            i++
        } else {
            $('#subContent').append(html);
        }
        subIndex++;
    }

    /**
     * 获取单位分类下的所有单位
     */
    function getChildDepart(obj) {
        var deptRelation = $(obj).val();
        var deptid = $(obj).find("option:selected").attr('data-deptid');
        console.log(obj);
        $.ajax({
            type: "post",
            url: getUrl("deptList"),
            data: {
                deptRelation: deptRelation + deptid + "/"
            },
            dataType: "json",
            success: function (data) {
                if (data == undefined || data == null) {
                    console.log("获取单位分类下的所有单位为空");
                    return;
                }
                // 选到具体单位的下拉框节点
                var childDepartSelect = $(obj).parent().next().children(".form-control");
                // 清空下拉框
                childDepartSelect.empty();
                var childDepartOption = '<option value="">点击选择</option>';
                for (var i = 0; i < data.length; i++) {
                    var deptName = data[i].deptName;
                    var sysId = data[i].sysId;
                    childDepartOption += '<option value="' + sysId + '">' + deptName + '</option>';
                }
                // 将数据添加到具体单位的下拉框
                childDepartSelect.append(childDepartOption);
            },
            error: function (jqXHR) {
                console.log("获取单位分类下的所有单位失败");
            }
        });
    }

    /**
     * 修改承办单位,给隐藏框赋值
     */
    function changeDepart(obj) {
        console.log(obj)
        var departName = $(obj).find("option:selected").text();
        if (departName == "点击选择") {
            $(obj).siblings("input").val('');
        } else {
            $(obj).siblings("input").val(departName);
        }
    }

    /**
     * 删除子任务和承办单位
     */
    $("#subContent").on("click", ".delbtn", function () {
        $(this).parent().parent().parent().remove();
    });
    $("#subContent").on("click", ".delDeparts", function () {
        $(this).parent().parent().parent().remove();
    });
    /**
     * 添加子任务和承办单位
     */
    $("#subContent").on("click", ".addbtn", function () {
        var deptId = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].deptId';
        var deptName = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].deptName';
        var timeLimit = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].timeLimit';
        var unitType = 'taskSubFilterList[' + subIndex + '].taskUnitList['+deptIndex+'].unitType';
        var html = ' <div class="form-group" style="margin:0px 0px 15px ">\n' +
            '                <div class="form-group" style="margin:0px 0px 15px ">\n' +
            '                    <label class="col-sm-2 control-label no-padding-right">\n' +
            '                        <a style="color: red">*</a>承办单位\n' +
            '                    </label>\n' +
            '                    <div class="col-sm-2">\n' +
                        '        <select class="form-control required" onchange="getChildDepart(this)">\n' + departCategoryOption +
                        '        </select>\n' +
            '                    </div>\n' +
            '                    <div class="col-sm-3">\n' +
            '                        <select class="form-control required" name="' + deptId + '" id="' + deptId + '" onchange="changeDepart(this)" >\n' +
            '                            <option value="">点击选择</option>\n' +
            '                        </select>\n' +
            '        <input type="hidden" name="' + deptName + '" id="' + deptName + '" />\n' +
            '                    </div>\n' +
                '         <div class="col-sm-1">\n' +
                    '         <input type="button" value="删除单位"\n' +
                    '        class="btn-sm btn-danger delbtn"/>\n' +
                '         </div>\n' +
            '                </div>\n' +
            '                <div class="form-group" style="margin:0px 0px 15px ">\n' +
            '                    <label class="col-sm-2 control-label no-padding-right">\n' +
            '                        <a style="color: red">*</a>单位类型\n' +
            '                    </label>\n' +
            '                    <div class="col-sm-2">\n' +
            '                        <select class="form-control required" name="' + unitType + '" id="' + unitType + '" >\n' +
                                        ' <option value="">点击选择</option>\n' +
                                        ' <option value="1">牵头</option>\n' +
                                        ' <option value="2">主办</option>\n' +
                                        ' <option value="3">协办</option>\n' +
                                        ' <option value="4">分办</option>\n' +
                                        ' <option value="5">独办</option>\n' +
            '                        </select>\n' +
            '                    </div>\n' +
            '                    <label class="col-sm-2 control-label no-padding-right" for="dateTime">任务时限</label>\n' +
            '                    <div class="col-sm-3">\n' +
            '                        <input type="number"  name="'+timeLimit+'" id="'+timeLimit+'"   placeholder="任务时限" value="" class="form-control  dateTime"/>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '            </div>';
        $(this).parent().parent().parent().append(html);
        deptIndex++;
        console.log( deptIndex)
    });

    /**
     *  任务时限
     */
    $('.dateTime').change(function () {
        console.log($(this));
        var num = $(this).val();
        num>0 ?  num : num = 0
        $(this).val(num);
    })
    /**
     * 上传附件
     */
    $("#btn-upload").click(function () {
        var fileVal = $("#fileupload").val();
        if (fileVal == null || fileVal == "") {
            alert("未选择任何文件");
            return;
        }
        // 判断文件大小是否大于10M
        var fileSize = $("#fileupload")[0].files[0].size / 1024 / 1024;
        if (fileSize > 10) {
            alert("上传文件大小不能大于10M");
            return;
        }
        $(".shade").fadeIn(100);
        $(".warning").fadeIn(100);
        $('.la-square-jelly-box').show();
        showShade();
        //警告框自定义内容
        $('.warning>.title>em').html('加载中……');
        $.ajaxFileUpload({
            type: "post",
            fileElementId: "fileupload",
            secureuri: false,
            dataType: 'text',
            url: "/filesUpload/uploadBatch",
            // data:fileinfo,
            async: false,
            success: function (data) {
                var data = JSON.parse(data);
                console.log(data);
                var val = data.data.sysid;
                $("#file").attr("value", val);
                if (data.code === "200") {
                    $('.warning>.title>em').html('上传成功');
                } else {
                    $('.warning>.title>em').html('上传失败');
                }
            },
            error: function (data) {
                alert("附件上传失败 ！！请联系管理员");
            }
        });
    });

    /**
     * 抄送领导
     */
    $(document).ready(function () {
        $("#e1").select2({
            placeholder: "抄送领导",
            width: "100%",
            closeOnSelect: false,
            allowClear: true,
        });
    });
    /**
     * 显示导入Excel
     */
    $("#displayExcel").click(function () {
        var html = "<div class=\"form-group\">\n" +
            "        <label class=\"col-sm-2 control-label no-padding-right\">导入Excel</label>\n" +
            "        <div class=\"col-sm-6\">\n" +
            "            <input type=\"file\" id=\"file1\" name=\"fileContent\" class=\"form-control\">\n" +
            "        </div>\n" +
            "        <div class=\"col-sm-2\">\n" +
            "            <input type=\"button\" value=\"确认导入\" id=\"addExcel\" style=\"width: 100%; height: 32px;\"\n" +
            "                   class=\"btn-large btn-primary\"/>\n" +
            "        </div>\n" +
            "    </div>"
        $('#subContent').html(html);
        i = 0;
    })
    $(document).on('click','#addExcel',function(){
        console.log(1);
        var formData = new FormData();
        formData.append("excelFile", $("#file1")[0].files[0]);
        $.ajax({
            url: getUrl("taskExcel"),
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            success: function(data) {
                alert(data)
            },
            error: function() {
                alert("失败")
            }
        });
    });
    function addExcel() {
        var formData = new FormData();
        formData.append("excelFile", $("#file1")[0].files[0]);
        $.ajax({
            url: getUrl("taskExcel"),
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            success: function(data) {
                alert(data)
            },
            error: function() {
                alert("失败")
            }
        });
    }
</script>
